import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { connect } from 'react-redux'
import './index.css'

import { Layout, Menu } from 'antd'
import { useNavigate } from 'react-router'

import {
  UsergroupAddOutlined,
  UnlockOutlined,
  BankOutlined,
  SendOutlined,
  ShakeOutlined,
  TrophyOutlined,
} from '@ant-design/icons'
import axios from 'axios'
const { Sider } = Layout

const iconList = {
  '/home': <BankOutlined />,
  '/user-manage': <UsergroupAddOutlined />,
  '/user-manage/list': <UsergroupAddOutlined />,
  '/right-manage': <UnlockOutlined />,
  '/right-manage/role/list': <UnlockOutlined />,
  '/right-manage/right/list': <UnlockOutlined />,
  '/news-manage': <SendOutlined />,
  '/news-manage/add': <SendOutlined />,
  '/news-manage/list': <SendOutlined />,
  '/news-manage/draft': <SendOutlined />,
  '/news-manage/category': <SendOutlined />,
  '/audit-manage': <ShakeOutlined />,
  '/audit-manage/audit': <ShakeOutlined />,
  '/audit-manage/list': <ShakeOutlined />,
  '/publish-manage': <TrophyOutlined />,
  '/publish-manage/unpublished': <TrophyOutlined />,
  '/publish-manage/published': <TrophyOutlined />,
  '/publish-manage/sunset': <TrophyOutlined />,
}
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  }
}
function SideMenu(props) {
  let [menuList, setMenuList] = useState([])
  // 请求左侧菜单
  useEffect(() => {
    axios.get('/rights?_embed=children').then((res) => {
      setMenuList(res.data)
    })
  }, [])
  // 显示左侧导航数据
  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem('token'))
  function getMenuList(menuList) {
    return menuList.map((item) => {
      //如果pagepermisson===1，并且当前用户的rights中有当前key（即路径），说明当前项菜单应该显示
      if (item.pagepermisson === 1 && rights.includes(item.key)) {
        return getItem(
          item.label,
          item.key,
          iconList[item.key],
          item.children && item.children.length > 0
            ? getMenuList(item.children)
            : ''
        )
      }
    })
  }

  // 左侧导航点击事件--->编程式跳转
  const navigate = useNavigate()
  function onClick(e) {
    navigate(e.key)
  }

  const selectKeys = [useLocation().pathname]
  const openKeys = ['/' + useLocation().pathname.split('/')[1]]

  return (
    <Sider trigger={null} collapsible collapsed={props.isCollpased}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div className="logo">全球新闻发布系统</div>
        <div style={{ flex: '1', overflow: 'auto' }}>
          <Menu
            selectedKeys={selectKeys} //该属性是控制菜单高亮，加了default是非受控组件
            defaultOpenKeys={openKeys} //控制刷新打开的一级菜单
            mode="inline"
            theme="dark"
            items={getMenuList(menuList)}
            onClick={onClick}
          />
        </div>
      </div>
    </Sider>
  )
}
const mapStateToProps = ({ CollapseReducer: { isCollpased } }) => {
  return {
    isCollpased,
  }
}
export default connect(mapStateToProps)(SideMenu)
